<template>
	<div class="View">
		<!-- tab切换菜单 -->
		<el-tabs v-model="activeName" @tab-click="handleClick" class="bh-tab">
			<el-tab-pane :label="$t('message.ReportFormTable.nav.lab1')" name="first"></el-tab-pane>
			<el-tab-pane :label="$t('message.ReportFormTable.nav.lab2')" name="second"
				v-if="$hasOption('OPT_IDEM')"></el-tab-pane>
			<el-tab-pane :label="$t('message.ReportFormTable.nav.lab2')" name="third" 
				v-if="$hasOption('OPT_BUTYL')"></el-tab-pane>
		</el-tabs>

		<!-- 内容区域 -->
		<div class="container">
			<!-- 头部 -->
			<div class="title-view">
				<div class="top-btn-view">
					<div class="bottom">
						<div class="bottom-left-view">
							<div class="b-input">
								<div class="b-input-label">
									{{ $t("message.bhView.label.Plant") }}
								</div>
								<!-- 装置名称 -->
								<el-input v-model="$store.state.plantName" class="selectInput" readonly></el-input>
							</div>
							<el-button :type="$store.state.btn_set_BHView ? 'primary' : ''" class="bg-bottom-btn"
								style="margin-left: 10px;" v-if="activeName == 'first' || activeName === 'third'"
								:class="$store.state.btn_set_BHView ? '' : 'red'" @click="showRetrievalBtn(1)"
								:disabled="!isShowDmgBtn || !isLineNo || !isSysIntelligenceList">
								{{ $t("message.planView.btn.btn_set") }}
							</el-button>
							<el-button type="default" class="bg-bottom-btn" style="margin-left: 10px;"
								v-if="activeName == 'first'" @click="clearRetrievalBtn"
								:disabled="!isShowDmgBtn || !isLineNo || !isSysIntelligenceList">
								Clear
							</el-button>
							<el-button
								:type="!$store.state.btn_set_BHView2 ? '' : !$store.state.btn_set_BHView1 ? '' : 'primary'"
								class="bg-bottom-btn" style="margin-left: 10px;" v-if="activeName == 'second'"
								:disabled="!$store.state.btn_set_BHView2"
								:class="!$store.state.btn_set_BHView2 ? 'FFF' : !$store.state.btn_set_BHView1 ? 'red' : ''"
								@click="showRetrievalBtn(1)">
								{{ $t("message.planView.btn.btn_set") }}
							</el-button>
							<el-button :type="$store.state.btn_set_BHView2 ? 'primary' : ''" class="bg-bottom-btn"
								style="margin-left: 10px;" v-if="activeName == 'second'"
								:class="$store.state.btn_set_BHView2 ? '' : 'red'" @click="showRetrievalBtn(2)">
								担当課選択
							</el-button>
						</div>
					</div>
				</div>
			</div>
			<RetrievalView ref="RetrievalView" class="plan-c" v-if="activeName == 'first' || activeName === 'third'"
				@showRetrievalBtn="showRetrievalBtn"></RetrievalView>
			<!-- 出光A -->
			<RetrievalView1 ref="RetrievalView1" class="plan-c" v-if="activeName == 'second' && btnFlg == 1"
				@showRetrievalBtn="showRetrievalBtn"></RetrievalView1>
			<DanDangIndex ref="RetrievalView2" class="plan-c" v-if="activeName == 'second' && btnFlg == 2"
				@showRetrievalBtn="showRetrievalBtn"></DanDangIndex>

			<!-- 主体内容区 -->
			<div class="leftTabel-rightTabel-lineContent">
				<div class="left">
					<left-content :isShowDmgBtn="isShowDmgBtn" :isLineNo="isLineNo" :isSysIntelligenceList="isSysIntelligenceList"
						:clearSelect="clearSelect"></left-content>
				</div>
				<div class="right">
					<ReportFormTableVue v-if="activeName == 'first'" :isLineNo="isLineNo" :isShowDmgBtn="isShowDmgBtn" :isSysIntelligenceList="isSysIntelligenceList"
						@changeDogBtn="changeDogBtn" @changeLineNo="changeLineNo" @changeSysIntelligence="changeSysIntelligence">
					</ReportFormTableVue>
					<Customer003 v-if="activeName == 'second'" :isLineNo="isLineNo" :isShowDmgBtn="isShowDmgBtn"
						@changeDogBtn="changeDogBtn" @changeLineNo="changeLineNo">
					</Customer003>
					<!-- 日本ブチル -->
					<Customer123 v-if="activeName == 'third'" :isLineNo="isLineNo" :isShowDmgBtn="isShowDmgBtn"
						@changeDogBtn="changeDogBtn" @changeLineNo="changeLineNo">
					</Customer123>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import LeftContent from "../ReportForm/LeftContent/index";
import ReportFormTableVue from "../ReportForm/ReportFormTable";
import Customer003 from "../Customize/Customer003/ReportFormTable";
import Customer123 from "../Customize/Customer123/ReportFormTable";
import $ from "jquery";
import RetrievalView from '@/components/TabelLineCadViews/Retrieval/index.vue';
import RetrievalView1 from "../Customize/Customer003/Retrieval/index.vue";
import DanDangIndex from "../Customize/Customer003/Retrieval/DanDangIndex.vue";


import {GetPointClassificationInformation} from "@/api/api";

import eventBus from "@/eventBus/bus";
export default {
	name: "ExcelContent",
	data() {
		return {
			activeName: "first",
			selectPlant: {},

			isShowDmgBtn: true,
			isLineNo: true,
			isSysIntelligenceList: true,
			showRetrievalFlg: false,
			clearSelect: 1,
			btnFlg: 1,
		};
	},
	components: {
		"left-content": LeftContent,
		ReportFormTableVue,
		Customer003,
		Customer123,
		RetrievalView,
		RetrievalView1,
		DanDangIndex
	},

	watch: {
    activeName(newValue) {
      if (newValue === 'third') {
        this.isShowDmgBtn = true;
		this.isLineNo = true;
		this.isSysIntelligenceList = true;
      }
    }
  },
  
	methods: {
		changeDogBtn(e) {
			this.isShowDmgBtn = e;
		},
		changeLineNo(e) {
			this.isLineNo = e;
		},
		changeSysIntelligence(e) {
			this.isSysIntelligenceList = e;
		},
		//右侧筛选
		showRetrievalBtn(btnFlg) {

			// this.showRetrievalFlg = !this.showRetrievalFlg;
			// this.showRoHiddenRetrieva(this.showRetrievalFlg);
			if (this.activeName == 'first') {
				this.showRetrievalFlg = !this.showRetrievalFlg;
				this.showRoHiddenRetrieva(this.showRetrievalFlg);
			}
			if (this.activeName == 'second') {
				this.btnFlg = btnFlg;
				this.showRetrievalFlg = !this.showRetrievalFlg;

				setTimeout(() => {
					this.showRoHiddenRetrieva(this.showRetrievalFlg);
				}, 100);
			}
			if (this.activeName == 'third') {
				this.btnFlg = btnFlg;
				this.showRetrievalFlg = !this.showRetrievalFlg;

				setTimeout(() => {
					this.showRoHiddenRetrieva(this.showRetrievalFlg);
				}, 100);
			}
		},
		clearRetrievalBtn() {
			this.$refs.RetrievalView.delCodSourceByUserApi();
		},
		showRoHiddenRetrieva(flg) {
			console.log(process.env.NODE_ENV);
			console.log(process.env.VUE_APP_ENABLE_CUSTOM_MENU);
			console.log(process.env.VUE_APP_ENABLE_CUSTOM_MENU[0]);
			if (process.env.NODE_ENV === 'development') {
				console.log('当前环境为开发环境');
			}
			if (process.env.NODE_ENV === 'production') {
				console.log('当前为打包后的生产环境');
			}
			if (flg) {
				$('.plan-c').css('right', '10px');
				// 通知第一次显示
				this.$refs.RetrievalView.initFn(true);
			} else {
				$('.plan-c').css('right', '-560px');
			}
		},
		handleClick(tab, event) {
			this.clearSelect++;
			this.showRetrievalFlg = false;

			this.$store.state.btn_set_BHView1 = true;
			this.$store.state.btn_set_BHView2 = true;

			// Butyl_DB のアクセス権限を確認する
			if (tab.name === 'third') {
					this.checkButylAccess();
				}
		},
		async checkButylAccess() {
        let response = await GetPointClassificationInformation()
        this.activeName = 'third';
      	},

		selectedPlantChange(e) {
			this.selectPlant = e;
		}
	},
	created() { },
	mounted() {

		this.$nextTick(function () {
			if ($(".LeftMenu").width() == 64) {
				$(".View").width($(".Content").width() - 64);
			} else if ($(".LeftMenu").width() == 192) {
				$(".View").width($(".Content").width() - 192);
			}
		});

		eventBus.$on("showOffCustomer1", () => {
			this.showRetrievalFlg = false;
			this.showRoHiddenRetrieva(false);
		})
	},
	beforeDestroy() {
		eventBus.$off("showOffCustomer1")
	},
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.View {
	width: calc(100% - 192px);
	height: 100%;

	.container {
		width: 100%;
		height: calc(100% - 55px);

		.title-view {
			width: calc(100% - 48px);
			background: #f8f8f8;
			border-bottom: 1px solid #e1e1e1;
			margin-left: 24px;

			.top-tab {
				display: flex;
				width: 100%;
				height: 55px;
			}

			.btn-box {
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			.top-btn-view {
				height: 48px;
				display: flex;
				align-content: center;
				justify-content: space-between;

				.tab-btn {
					min-width: 60px;
					height: 32px;
					text-align: center;
					line-height: 32px;
					color: rgba(0, 0, 0, 0.65);
					margin-right: 2px;
					border-radius: 2px;
					transition: 0.5s;
				}

				.tab-btn:hover {
					background: rgba(33, 61, 73, 0.05);
				}

				.downBtnActive {
					background: rgba(33, 61, 73, 0.05);
				}
			}

			.bottom {
				width: calc(100% - 256px);
				height: 48px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				// margin-left: 120px;
				.bottom-left-view {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					height: 40px;
				}

				.bottom-right-view {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					height: 40px;

					button {
						min-width: 52px;
						height: 24px;
						border-radius: 4px;
						// border: 1px solid #d3d3d3;
						margin-left: 16px;
					}

					.bg-bottom-btn {
						// background: #106ebe;
						// color: #ffffff;
					}
				}

				.b-input {
					display: flex;
					align-items: center;
					height: 100%;
					margin-right: 24px;

					.b-input-label {
						font-size: 14px;
						color: rgba(0, 0, 0, 0.85);
						height: 24px;
						line-height: 24px;
					}

					.selectInput {
						width: 224px;
						height: 24px;
					}

					.selectInputlong {
						width: 384px;
						margin-left: 8px;

						::v-deep .el-input__inner {
							width: 384px;
						}
					}

					::v-deep .el-input__inner {
						width: 224px;
						height: 24px;
						color: rgba(0, 0, 0, 0.65);
						background: #f8f8f8;
					}

					::v-deep .el-input__icon {
						line-height: 24px;
					}
				}
			}
		}

		.leftTabel-rightTabel-lineContent {
			width: 100%;
			height: calc(100% - 52px);
			display: flex;
			justify-content: flex-start;

			.left {
				width: 264px;
				height: 100%;
			}

			.right {
				width: calc(100% - 264px);
				padding: 0 16px;
				height: 100%;
				display: flex;
				flex-direction: column;
			}

			.wide-right {
				width: 100%;
				padding: 0 16px 0 24px;
			}
		}
	}
}

.bh-tab {
	width: 100%;

	// height: 100%;
	::v-deep .el-tabs__header {
		margin: 14px 24px 0 24px;
		width: calc(100% -48px);
	}

	::v-deep .el-tabs__content {
		height: calc(100% - 55px);
	}

	::v-deep #pane-first {
		height: 100%;
	}

	::v-deep #pane-second {
		height: 100%;
	}

	::v-deep #pane-third {
		height: 100%;
	}
}

.plan-c {
	position: fixed;
	width: 560px !important;
	height: calc(100% - 198px);
	background: #FFF;
	right: -560px;
	bottom: 0;
	z-index: 9999;
	transition: all 0.3s ease;
	border: 1px solid #C3C3C3;
}

.bg-bottom-btn {
	height: 60%;
	// background: #106ebe;
	// color: #ffffff;
	padding: 0 12px;
}

.red {
	background-color: #bc000f;
	border-color: #bc000f;
	color: #fff;
}

.FFF {
	background-color: #FFF;
	color: rgba(0, 0, 0, 0.35);
}
</style>
